<template>
  <div class="dialog-page"  @click.stop.prevent="closeDialog">
    <div class="dialog-content col-8 py-4" @click.stop>
      <p class="text-center fs-5 text-primary mt-3 fw-bold">个人信息</p>
      <div class="user-img col-6 mx-auto">
        <img
            class="img-circle mx-auto"
            src="https://th.bing.com/th/id/R.e7374c116733a48d6bd55f77c878193d?rik=3xO%2fFHlI7DICmw&riu=http%3a%2f%2fimg.keaiming.com%2fuploads%2fallimg%2f2020052714%2fm03l2s3ztpj.jpeg&ehk=rjs22BrJwcnwO6FNaiHU2O6zwffYuGpHXz133mQnbLY%3d&risl=&pid=ImgRaw&r=0"
            width="150"/>
      </div>

      <div class="input-material-group mb-3 col-10 mx-auto">

          <input
              v-model="userBasicDetail.name"
              class="input-material fw-bolder fs-5"
              placeholder="用户名"/>
      </div>

      <div  class="input-material-group mb-3 col-10 mx-auto">
        <input
            v-model="userBasicDetail.motto"
            class="input-material"
            placeholder="个人描述"/>
      </div>

      <div class="input-material-group mb-5 col-10 mx-auto">
        <div class="float-right d-flex">
          <NButton color="#9E9D9D" @click="closeDialog" >
            关闭
          </NButton>
          <p class="w-5"></p>
          <NButton color="#2F80ED" @click="submitRequest">
            确认
          </NButton>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, defineProps, ref, onMounted} from 'vue';
import { useNotification} from "naive-ui";
import { useUserStore } from "@/store";
import { useRouter } from 'vue-router';
import { updateUserBasicDetail, isResultLogin, getUserDetail } from "@/api";
import { resultCodeNotify } from '@/utils/rest/notifyHint'


const emit = defineEmits(['account_dialog-closed']);
const userStore = useUserStore();
const router = useRouter();                  // 路由跳转
const userBasicDetail = ref({name: '', motto: ''})  // iconUrl: '',
const hint = useNotification();


onMounted( ()=> {
  const getUserDetail = userStore.getAppointUserInfo().userSetting
  //userBasicDetail.value.iconUrl = getUserDetail.iconUrl
  userBasicDetail.value.name = getUserDetail.name
  userBasicDetail.value.motto = getUserDetail.motto
})

/**
 * 关闭
 */
function closeDialog() {
  emit('account_dialog-closed')
}

/**
 * 提交个人信息
 */
function submitRequest() {
  updateUserBasicDetail(userBasicDetail.value).then(res => {
    isResultLogin(res.code, router)
    if (res.code === 200) {
      getUserDetail()
      emit('account_dialog-closed')
    }
  }).catch(error => {
    resultCodeNotify(hint,  "验证码发送", error)
    emit('account_dialog-closed')
  })
}


</script>

<style scoped>
body, html {
  margin: 0;
  width: 100%;
  height: 100%; /* 确保body和html有全屏高度 */
}

.dialog-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* 添加Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.dialog-content {
  border-radius: 5px;
  background-color: #f1f1f1;
}

.img-circle {
  border-radius: 100%;
}

.input-material-group {
  position: relative;
  padding-top: 0.85rem
}

.input-material-group .input-material {
  letter-spacing: 1px;
  border: none;
  outline: none;
  background: none;
  padding: .375rem 0;
  border-bottom: 1px solid #40444b;
  display: block;
  width: 100%;
  text-align: center;
}

</style>

